<template>
  <div class="warehouseDetail-container" :class="!isShowContent ? 'po' : ''">
    <div class="search flex_column_center">
      <div class="data-screen-card">
        <el-input
          v-model="searchValue"
          style="width: 240px"
          placeholder="请输入产品名称"
          :suffix-icon="Search"
          @keyup.enter="handleSreach()" />
      </div>
      <div>
        <ElButton style="margin-right: 40px" type="primary" @click="handleSreach()">确定</ElButton>
        <ElButton type="info" @click="searchValue = ''">清空</ElButton>
      </div>
    </div>
    <div class="content">
      <ElCard>
        <template #header>
          <div class="card-header flex">
            <span class="check-title">{{ isShowContent ? '查询结果' : '历史记录' }}:</span>
            <div class="check-content">
              <template v-for="(item, i) in productList" :key="i">
                <span
                  class="check-result"
                  v-if="i < 20"
                  :class="{ active: selectProductIndex == i }"
                  style="margin-bottom: 12px"
                  @click="
                    () => {
                      selectProductIndex = i;
                      handleProduct(item);
                    }
                  ">
                  {{ item.itemName }}
                </span>
              </template>
            </div>
          </div>
        </template>
        <ElRow v-if="isShowContent" :gutter="14" style="width: 100%" v-loading="loading">
          <ElCol :span="6">
            <div class="content-mode" style="height: '180px'">
              <div class="h2">生产信息：</div>
              <ElRow :gutter="8" style="width: 100%">
                <ElCol :span="12">
                  <div class="el-descriptions__cell">
                    <span class="el-descriptions__label">产品编号:</span>
                    <span class="el-descriptions__content">
                      {{ selectProductRow ? selectProductRow.itemCode : '--' }}</span
                    >
                  </div>
                </ElCol>
                <ElCol :span="12">
                  <div class="el-descriptions__cell">
                    <span class="el-descriptions__label"> 产品名称:</span>
                    <span class="el-descriptions__content">
                      {{ selectProductRow ? selectProductRow.itemName : '--' }}</span
                    >
                  </div>
                </ElCol>
                <ElCol :span="12">
                  <div class="el-descriptions__cell">
                    <span class="el-descriptions__label"> 规格型号:</span>
                    <span class="el-descriptions__content">
                      {{ selectProductRow ? selectProductRow.specification : '--' }}</span
                    >
                  </div>
                </ElCol>
                <ElCol :span="12">
                  <div class="el-descriptions__cell">
                    <span class="el-descriptions__label"> 单位:</span>
                    <span class="el-descriptions__content">
                      {{ selectProductRow ? selectProductRow.unitOfMeasure : '--' }}</span
                    >
                  </div>
                </ElCol>
                <ElCol :span="12">
                  <div class="el-descriptions__cell">
                    <span class="el-descriptions__label"> 分类:</span>
                    <span class="el-descriptions__content">
                      {{ selectProductRow ? selectProductRow.itemTypeName : '--' }}</span
                    >
                  </div>
                </ElCol>
                <ElCol :span="12">
                  <div class="el-descriptions__cell">
                    <span class="el-descriptions__label"> 物料等级:</span>
                    <span class="el-descriptions__content">
                      {{ selectProductRow ? selectProductRow.itemGrade : '--' }}</span
                    >
                  </div>
                </ElCol>
                <ElCol :span="12">
                  <div class="el-descriptions__cell">
                    <span class="el-descriptions__label"> 创建人:</span>
                    <span class="el-descriptions__content">
                      {{ selectProductRow ? selectProductRow.createBy : '--' }}</span
                    >
                  </div>
                </ElCol>
              </ElRow>
            </div>
            <div class="content-mode" style="height: 220px">
              <div class="h2">供应商信息：</div>
              <ElRow :gutter="8" style="width: 100%">
                <div class="card-yq">
                  <el-row class="card-yq-title" style="width: 100%; justify-content: space-between">
                    <el-col :span="6"><div class="grid-title">供应商编码</div></el-col>
                    <el-col :span="6"><div class="grid-title">供应商名称</div></el-col>
                    <el-col :span="6"><div class="grid-title">供应商评分</div></el-col>
                    <el-col :span="6"><div class="grid-title">供应商等级</div></el-col>
                  </el-row>
                  <div class="card-scroll" v-if="supplierList.length">
                    <vue3-seamless-scroll v-if="true" hover-stop="true" :list="supplierList" hover="true" step="0.3">
                      <el-row
                        v-for="(item, index) in supplierList"
                        :key="index"
                        style="width: 100%; justify-content: space-between">
                        <el-col :span="6">
                          <div class="grid-title grid-title-center">{{ item.vendorCode || '--' }}</div>
                        </el-col>
                        <el-col :span="6">
                          <div class="grid-title grid-title-center">{{ item.vendorName || '' }}</div>
                        </el-col>
                        <el-col :span="6">
                          <div class="grid-title grid-title-center">{{ item.vendorScore || '' }}</div>
                        </el-col>
                        <el-col :span="6">
                          <div class="grid-title grid-title-center">{{ item.vendorLevel || '' }}</div>
                        </el-col>
                      </el-row>
                    </vue3-seamless-scroll>
                  </div>
                  <BiEmpty v-else />
                </div>
              </ElRow>
            </div>
            <div class="content-mode" style="height: 220px">
              <div class="h2">BOM组成：</div>
              <ElRow :gutter="8" style="width: 100%">
                <div class="card-yq">
                  <el-row class="card-yq-title" style="width: 100%; justify-content: space-between">
                    <el-col :span="4"><div class="grid-title">物料编码</div></el-col>
                    <el-col :span="4"><div class="grid-title">物料名称</div></el-col>
                    <el-col :span="4"><div class="grid-title">规格</div></el-col>
                    <el-col :span="4"><div class="grid-title">单位</div></el-col>
                    <el-col :span="4"><div class="grid-title">使用比例</div></el-col>
                    <el-col :span="4"><div class="grid-title">备注</div></el-col>
                  </el-row>
                  <div class="card-scroll" v-if="bomList">
                    <vue3-seamless-scroll v-if="true" hover-stop="true" :list="bomList" hover="true" step="0.3">
                      <el-row
                        v-for="(item, index) in bomList"
                        :key="index"
                        style="width: 100%; justify-content: space-between">
                        <el-col :span="4">
                          <div class="grid-title grid-title-center">{{ item.bomItemCode || '--' }}</div>
                        </el-col>
                        <el-col :span="4">
                          <div class="grid-title grid-title-center">{{ item.bomItemName || '--' }}</div>
                        </el-col>
                        <el-col :span="4">
                          <div class="grid-title grid-title-center">{{ item.bomItemSpec || '--' }}</div>
                        </el-col>
                        <el-col :span="4">
                          <div class="grid-title grid-title-center">{{ item.unitOfMeasure || '--' }}</div>
                        </el-col>
                        <el-col :span="4">
                          <div class="grid-title grid-title-center">{{ item.quantity || '--' }}</div>
                        </el-col>
                        <el-col :span="4">
                          <div class="grid-title grid-title-center">{{ item.remark || '--' }}</div>
                        </el-col>
                      </el-row>
                    </vue3-seamless-scroll>
                  </div>
                  <BiEmpty v-else />
                </div>
              </ElRow>
            </div>
          </ElCol>
          <ElCol :span="18">
            <ElRow :gutter="8" style="width: 100%">
              <ElCol :span="4">
                <div class="content-mode">
                  <div class="h2">库存现有：</div>
                  <template v-if="statisticsInfo">
                    <LiquidfillSmall
                      style="height: 174px"
                      radius="80%"
                      viewFormat="num"
                      :value="statisticsInfo.total" />
                  </template>
                  <BiEmpty v-else />
                </div>
              </ElCol>
              <ElCol :span="10">
                <div class="content-mode">
                  <div class="h2">入库统计：</div>
                  <template v-if="statisticsInfo">
                    <BiBaseChart style="height: 174px" :option="mixingWarehouseBi3(statisticsInfo.intoNumStatistics)" />
                  </template>
                  <BiEmpty v-else />
                </div>
              </ElCol>
              <ElCol :span="10">
                <div class="content-mode">
                  <div class="h2">出库统计：</div>
                  <template v-if="statisticsInfo">
                    <BiBaseChart style="height: 174px" :option="mixingWarehouseBi3(statisticsInfo.intoNumStatistics)" />
                  </template>
                  <BiEmpty v-else />
                </div>
              </ElCol>
            </ElRow>
            <div style="width: 100%; height: 502px">
              <BiGatt ref="ganttChar" optType="edit" :ids="[]" height="100%" />
            </div>
          </ElCol>
        </ElRow>
      </ElCard>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { ElButton, ElMessage } from 'element-plus';
import { mixingWarehouseBi3 } from './echarts';
import {
  getStatisticsByItemId,
  getTaskVisualDetailByItemId,
  listProductBomByItemId,
  listProductItemByName,
  listVendorByItemId,
} from '../../api/warehouseBi';

defineOptions({
  name: 'WarehouseDetail',
});

const props = defineProps({
  type: {
    type: Number,
    default: 2, //统计类型:1-代表本周;2-代表本月;3-代表本年;4-代表自定义时间
  },
  timeRange: {
    type: Object,
    default: {
      startTime: '',
      endTime: '',
    }, //时间区间
  },
});

const searchValue = ref('SY015毛坯');
const loading = ref(true);
const ganttChar = ref<any>(null); //gant实例
const productList = ref<any>([]); //产品物料信息
const selectProductIndex = ref<any>(-1); //选中物料下标
const selectProductRow = ref<any>(null); //选中物料条目
const isShowContent = ref<any>(false); //选中物料条目

// 供应商信息
const supplierList = ref<any>([]);
// BOM组成
const bomList = ref<any>([]);
// 库存统计
const statisticsInfo = ref<any>(null);

onMounted(() => {});

// 加载页面
const getPageData = () => {
  if (selectProductIndex.value < 0) return;
  handleProduct(selectProductRow.value);
};

// 查询
const handleSreach = () => {
  listProductItemByName({ name: searchValue.value }).then((_res) => {
    const list = _res.data;
    productList.value = list;
    selectProductIndex.value = -1;
    ElMessage.success('查询成功');
  });
};
// 通过物料查询
const handleProduct = async (row: any) => {

  loading.value = true;

  const { itemId, specification } = row;

  selectProductRow.value = row;

  isShowContent.value = true;

  try {
    const request1 = listVendorByItemId({ itemId });
    const request2 = listProductBomByItemId({ itemId, specification });
    const request3 = getStatisticsByItemId({ itemId, type: props.type, ...props.timeRange, specification });

    Promise.all([request1, request2, request3]).then((_res) => {
      const res1 = _res[0];
      const res2 = _res[1];
      const res3 = _res[2];

      supplierList.value = res1.data;
      bomList.value = res2.data;
      statisticsInfo.value = res3.data;
    });

    const res4 = await getTaskVisualDetailByItemId({ itemId, specification });

    const { returnData, returnLinkData } = res4.data;

    ganttChar.value.initData({
      data: returnData,
      links: returnLinkData,
    });

    ElMessage.success('加载成功');

    loading.value = false;
  } catch (error) {}
};

defineExpose({
  getPageData,
});
</script>

<style lang="scss" scoped>
.warehouseDetail-container {
  &.po {
    width: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
}

.data-screen-card {
  position: relative;
  width: 40%;
  min-height: 40px;
  height: 40px;
  background: #0f0c29;
  background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
  border: 3px solid #01ffff;
  margin-bottom: 20px;

  &::before {
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 30px;
    z-index: 0;
    width: calc(100% - 60px);
    pointer-events: none;
    content: '';
    border-top: 3px solid #101f58;
    border-bottom: 3px solid #101f58;
  }

  &::after {
    position: absolute;
    top: 30px;
    right: -3px;
    left: -3px;
    z-index: 0;
    height: calc(100% - 60px);
    pointer-events: none;
    content: '';
    border-right: 3px solid #101f58;
    border-left: 3px solid #101f58;
  }

  :deep() {
    .el-input {
      width: 100% !important;
      height: 41px;
      background: transparent;
    }

    .el-input__wrapper {
      background-color: transparent;
      border: 1px solid transparent !important;
      box-shadow: none !important;
    }

    .el-input__inner {
      color: #fff;
    }
  }
}

.card-yq {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  .card-yq-title {
    height: 42px;
    background-image: url('../../assets/images/u246.svg'); /* 替换为你的 SVG 文件路径 */
    background-repeat: repeat; /* 实现平铺效果 */
  }
}

.search {
  margin-bottom: 20px;
}

.dot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #50a3f8;
  text-align: center;
  line-height: 20px;
  color: #409eff;
}

.content {
  .content-mode {
    border: none;
    box-shadow: 0px 0px 6px rgba(195, 211, 222, 0.501960784313725);
    padding: 12px;
    margin-bottom: 12px;

    .h2 {
      color: #409eff;
      font-size: 24px;
      margin-bottom: 12px;
      display: -webkit-box;
      /* 将对象作为弹性伸缩盒子模型显示 */
      -webkit-box-orient: vertical;
      /* 设置伸缩盒子的子元素排列方式为垂直排列 */
      -webkit-line-clamp: 1;
      /* 显示的行数，这里是3行 */
      overflow: hidden;
      /* 超出部分隐藏 */
      text-overflow: ellipsis;
    }
    .h3 {
      color: #409eff;
      margin-bottom: 10px;
      padding-left: 12px;
    }
    .el-descriptions__label {
      width: 72px;
    }
  }

  :deep() {
    .el-card {
      background-color: transparent !important;
      border: none !important;
    }

    .el-descriptions__body {
      background-color: transparent !important;
    }

    .el-descriptions {
      border: none;
      box-shadow: 0px 0px 6px rgba(195, 211, 222, 0.501960784313725);
      padding: 12px;
      height: 205px;
      overflow-y: hidden;
    }

    .el-descriptions__title {
      color: #409eff;
    }

    .el-descriptions__label {
      color: #fff;
      display: inline-block;
      width: 60px;
      text-align: left;
    }

    .el-timeline-item__dot {
      left: -6px;
    }
  }

  .card-header {
    color: #fff;
    align-items: start;

    .check-title {
      display: inline-block;
      width: 80px;
      margin-right: 20px;
    }
    .check-content {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      .check-result {
        background-color: #909399;
        color: #fff;
        padding: 8px 15px;
        border-radius: var(--el-border-radius-base);
        font-size: var(--el-font-size-base);
        margin-right: 12px;
        cursor: pointer;
        &.active {
          background-color: #409eff;
        }
        &:hover {
          background-color: rgba(64, 158, 255, 0.8);
        }
      }
    }
  }

  .el-descriptions__cell {
    padding-bottom: 12px;
    display: flex;

    .material_list {
      width: 100%;

      .material_cell {
        padding: 4px 8px;
        border-bottom: 1px dashed #8f959a;

        .flex {
          span {
            font-size: 12px;
            margin: 2px;
            color: #fff;

            &:last-child {
              margin-right: 0px;
            }
          }
        }
      }
    }
  }

  .el-descriptions__header {
    margin-bottom: 16px;
    color: #409eff;
    font-size: 16px;
    font-weight: bold;
  }

  .el-descriptions__label {
    font-size: 14px;
    font-weight: normal;
    line-height: 23px;

    &.auto {
      width: auto;
    }
  }

  .el-descriptions__content {
    color: #fff;
    font-size: 14px;
    overflow: hidden;
    max-height: 40px;
    max-width: 100px;
    line-height: 22px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .use {
    .el-descriptions__content {
      flex: 1;
      display: flex;
      justify-content: space-between;
      line-height: 22px;

      color: #fff;
      // overflow: hidden;
      // max-height: 40px;

      .value {
        overflow-wrap: break-word; /* 允许在单词内断行 */
        word-break: break-word; /* 防止将单词拆分到下一行 */
        max-width: 130px;
        // min-width: 70px;
        // text-overflow: ellipsis;
        // display: -webkit-box;
        // -webkit-line-clamp: 2;
        // -webkit-box-orient: vertical;
      }
      .link {
        display: inline-block;
        max-width: 56px;
        min-width: 30px;
        height: 23px;
        line-height: 23px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .order {
    .cell {
      .title {
        color: #fff;
        margin-bottom: 8px;
      }
      .drop {
        color: #409eff;
      }
    }

    .el-descriptions {
      display: flex;
      flex-direction: column;
      .order_content {
        flex: 1;
        overflow-y: auto;
      }
    }
  }

  img {
    // transform: rotate(90deg)  translate(calc( 100vh / 2 - 100vw / 2) , calc(100vh / 2 - 100vw / 2));
    display: block;
    max-width: 100%;
    height: 100px;
    cursor: pointer;
    transform: rotate(90de);
  }
}
</style>
